.head-number-panel {
  text-align: center;
  padding-top: 38px;
  margin-bottom: 27.5px;

  .number-info {
    display: inline-block;
    font-size: 14px;
    color: #15161A;
    text-align: center;
    line-height: 18px;

    .number-name {
      padding-right: 6px;
    }

    .number-value, .number-unit {
      font-family: TCloudNumber-Regular;
    }
  }

  .number-control {
    margin-top: 27.5px;
    text-align: center;
    position: relative;

    .number-control-content {
      display: block;
      width: 128px;
      height: 280px;
      margin: 0 auto;
      position: relative;

      .number-mark {
        width: 16px;
        height: 280px;
        background-image: url("https://main.qcloudimg.com/raw/d63f703fc78112f530cad776cf09a514/number-mark.svg");
        background-repeat: no-repeat;
        background-size: 100%;
        position: absolute;
        top: 0;
        left: -36px;
      }

      .number-range {
        height: 100%;
        position: absolute;
        top: 0;
        right: 176px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-family: TCloudNumber-Regular;
        font-size: 12px;
        color: #C2C5CC;
        letter-spacing: 0;
        text-align: right;
        line-height: 18px;

        .number-max {
          margin-top: -9px;
        }

        .number-min {
          margin-bottom: -9px;
        }

        .number-value-hint {
          position: absolute;
          transform: translateY(50%);
          right: 0;
          z-index: 1;
          background: #15161A;
          border-radius: 13.25px;
          font-family: TCloudNumber-Regular;
          font-size: 14px;
          color: #FFFFFF;
          line-height: 19.5px;
          padding: 1.5px 7.5px;
          min-width: 40px;
          text-align: center;
          box-sizing: border-box;
        }
      }

      .number-bar {
        width: 100%;
        height: 280px;
        position: absolute;
        z-index: 5;
        top: 0;
        left: 0;
        background-image: linear-gradient(180deg, #E0E2E7 0%, #E1E2E5 100%);
        border-radius: 12px;
        overflow: hidden;
        touch-action: none;

        ::-webkit-scrollbar {
          display:none;
          width:0;
          height:0;
          color:transparent;
        }

        .number-track {
          width: 100%;
          height: 100%;
          border-radius: 0 0 12px 12px;

          &.under {
            background-image: linear-gradient(135deg, #3D8BFF 0%, #0066FF 100%);
            border-radius: 0 0 12px 12px;
            height: 100%;
            position: relative;
          }

          &.upper {
            height: 100%;
          }
        }
      }

      .number-handler {
        position: absolute;
        left: 50%;
        top: 7px;
        transform: translateX(-50%);
        // z-index: 3;
        background-image: url("https://main.qcloudimg.com/raw/3b19161ca00b182342e377a5b0eb0679/number-handler.svg");
        background-repeat: no-repeat;
        width: 35px;
        height: 3px;
        background-size: 100%;
      }
    }
  }

  &.disabled {
    .number-info {
      color: #A1A7B2;
    }

    .number-control {
      .number-control-content {
        .number-range {
          color: #C2C5CC;
        }

        .number-bar {
          background-image: linear-gradient(180deg, #E0E2E7 0%, #E1E2E5 100%);

          .number-track.under {
            background-image: none;
            background: #CCD0DA;
          }
        }
      }
    }
  }
}